<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <title>作物状态 - 人参管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <style>
        body {
            font-size: .875rem;
        }

        .sidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            z-index: 100;
            padding: 48px 0 0;
            box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
        }

        .sidebar-sticky {
            position: relative;
            top: 0;
            height: calc(100vh - 48px);
            padding-top: .5rem;
            overflow-x: hidden;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <%@ include file="../common/header.jsp" %>

    <div class="main-content">
        <!-- 筛选表单 -->
        <form method="get" action="${pageContext.request.contextPath}/production/crop_status" class="mb-3 d-flex align-items-center">
            <label class="me-2">基地ID：</label>
            <select name="baseId" class="form-select me-3" style="width: 150px;">
                <option value="">全部</option>
                <c:forEach var="id" items="${baseIdList}">
                    <option value="${id}" <c:if test="${selectedBaseId == id}">selected</c:if>>${id}</option>
                </c:forEach>
            </select>
            <button type="submit" class="btn btn-primary">筛选</button>
        </form>
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">作物状态</h1>
        </div>
        
        <!-- 作物生长数据概览 -->
        <div class="row mb-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">花茎生长趋势</h5>
                        <c:choose>
                            <c:when test="${not empty selectedBaseId}">
                                <canvas id="stemChart"></canvas>
                            </c:when>
                            <c:otherwise>
                                <p class="card-text">请先进行筛选</p>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">植株高度趋势</h5>
                        <c:choose>
                            <c:when test="${not empty selectedBaseId}">
                                <canvas id="heightChart"></canvas>
                            </c:when>
                            <c:otherwise>
                                <p class="card-text">请先进行筛选</p>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
            </div>
        </div>

        <!-- 作物状态列表 -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">作物状态列表</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>作物状态ID</th>
                                <th>环境数据ID</th>
                                <th>基地ID</th>
                                <th>生长年限</th>
                                <th>茎粗</th>
                                <th>植株高度</th>
                                <th>检测时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach items="${cropStatus}" var="crop">
                                <tr>
                                    <td>${crop.plantId}</td>
                                    <td>${crop.envId}</td>
                                    <td>${crop.baseId}</td>
                                    <td>${crop.growthYear}</td>
                                    <td>${crop.stemThickness}</td>
                                    <td>${crop.height}</td>
                                    <td>${crop.detectTime}</td>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <%@ include file="../common/footer.jsp" %>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        var trendLabels = JSON.parse('${trendLabelsJson}');
        var stemData = JSON.parse('${stemDataJson}');
        var heightData = JSON.parse('${heightDataJson}');

        window.onload = function() {
            if(trendLabels && trendLabels.length > 0) {
                // 花茎生长趋势图
                new Chart(document.getElementById('stemChart').getContext('2d'), {
                    type: 'line',
                    data: {
                        labels: trendLabels,
                        datasets: [{
                            label: '茎粗 (mm)',
                            data: stemData,
                            borderColor: 'rgb(255, 99, 132)',
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            tension: 0.1,
                            pointRadius: 4,
                            pointBackgroundColor: 'rgb(255, 99, 132)',
                            fill: false
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {display: true},
                            title: {
                                display: true,
                                text: '花茎生长趋势'
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: false,
                                title: {
                                    display: true,
                                    text: '茎粗 (mm)'
                                }
                            },
                            x: {
                                title: {
                                    display: true,
                                    text: '检测时间'
                                }
                            }
                        }
                    }
                });

                // 植株高度趋势图
                new Chart(document.getElementById('heightChart').getContext('2d'), {
                    type: 'line',
                    data: {
                        labels: trendLabels,
                        datasets: [{
                            label: '植株高度 (cm)',
                            data: heightData,
                            borderColor: 'rgb(54, 162, 235)',
                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
                            tension: 0.1,
                            pointRadius: 4,
                            pointBackgroundColor: 'rgb(54, 162, 235)',
                            fill: false
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {display: true},
                            title: {
                                display: true,
                                text: '植株高度趋势'
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: false,
                                title: {
                                    display: true,
                                    text: '植株高度 (cm)'
                                }
                            },
                            x: {
                                title: {
                                    display: true,
                                    text: '检测时间'
                                }
                            }
                        }
                    }
                });
            }
        }


    </script>
</body>
</html> 